<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <!-- 顶部导航栏 -->
    <div class="bg-black text-white">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center">
                <a th:href="@{/index}" class="flex items-center hover:text-gray-300 transition-colors">
                    <i class="fa fa-shopping-bag text-xl mr-2"></i>
                    <span class="text-lg font-semibold">我的商店</span>
                </a>
            </div>
            <div class="flex items-center space-x-4">
                <th:block th:if="${session.user != null}">
                    <span>
                        <i class="fa fa-user-circle mr-1"></i>
                        <span th:text="${session.user.username}">用户名</span>
                    </span>
                    <a th:href="@{/logout}" class="text-white hover:text-gray-300 transition-colors">
                        <i class="fa fa-sign-out mr-1"></i>退出登录
                    </a>
                </th:block>
                <th:block th:unless="${session.user != null}">
                    <span>
                        <i class="fa fa-exclamation-circle mr-1"></i>
                        请先登录
                    </span>
                    <a th:href="@{/login}" class="text-white hover:text-gray-300 transition-colors">
                        <i class="fa fa-sign-in mr-1"></i>去登录
                    </a>
                </th:block>
            </div>
        </div>
    </div>

    <!-- 购物车内容 -->
    <div class="container mx-auto px-4 py-8">
        <h1 class="text-3xl font-bold mb-8">我的购物车</h1>
        
        <div th:if="${cartItems.empty}" class="text-center py-8">
            <i class="fa fa-shopping-cart text-6xl text-gray-300 mb-4"></i>
            <p class="text-gray-500 text-lg">购物车是空的</p>
            <a th:href="@{/index}" class="inline-block mt-4 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                去购物
            </a>
        </div>

        <div th:unless="${cartItems.empty}" class="bg-white rounded-lg shadow-lg overflow-hidden">
            <!-- 购物车商品列表 -->
            <div class="divide-y divide-gray-200">
                <div th:each="item : ${cartItems}" class="p-6 flex items-center">
                    <!-- 商品图片 -->
                    <div class="w-24 h-24 flex-shrink-0">
                        <img th:src="${item.product.imageUrl}" th:alt="${item.product.name}" class="w-full h-full object-cover rounded">
                    </div>
                    
                    <!-- 商品信息 -->
                    <div class="ml-6 flex-grow">
                        <h3 class="text-lg font-semibold" th:text="${item.product.name}">商品名称</h3>
                        <p class="text-gray-600" th:text="${item.product.description}">商品描述</p>
                        <p class="text-red-600 font-semibold mt-1">
                            <span th:text="${item.product.price}">价格</span>元
                        </p>
                    </div>
                    
                    <!-- 数量控制 -->
                    <div class="flex items-center space-x-4">
                        <div class="flex items-center border rounded-lg">
                            <button th:onclick="'updateQuantity(' + ${item.id} + ', ' + (${item.quantity} - 1) + ')'"
                                    class="px-3 py-1 hover:bg-gray-100" th:disabled="${item.quantity <= 1}">
                                <i class="fa fa-minus"></i>
                            </button>
                            <span class="px-4 py-1" th:text="${item.quantity}">1</span>
                            <button th:onclick="'updateQuantity(' + ${item.id} + ', ' + (${item.quantity} + 1) + ')'"
                                    class="px-3 py-1 hover:bg-gray-100">
                                <i class="fa fa-plus"></i>
                            </button>
                        </div>
                        
                        <!-- 删除按钮 -->
                        <button th:onclick="'removeFromCart(' + ${item.id} + ')'"
                                class="text-red-600 hover:text-red-800">
                            <i class="fa fa-trash"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 购物车底部 -->
            <div class="p-6 bg-gray-50 flex justify-between items-center">
                <div class="text-lg">
                    总计：<span class="text-red-600 font-bold" th:text="${#aggregates.sum(cartItems.![product.price * quantity])}">0</span>元
                </div>
                <button class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                    结算
                </button>
            </div>
        </div>
    </div>

    <script>
        function updateQuantity(itemId, newQuantity) {
            if (newQuantity < 1) return;
            fetch(`/cart/${itemId}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    quantity: newQuantity
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    window.location.reload();
                } else {
                    alert('更新数量失败：' + data.message);
                }
            })
            .catch(error => {
                alert('操作失败，请稍后重试');
                console.error('Error:', error);
            });
        }

        function removeFromCart(itemId) {
            if (!confirm('确定要删除这个商品吗？')) return;
            
            fetch(`/cart/${itemId}`, {
                method: 'DELETE'
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    window.location.reload();
                } else {
                    alert('删除失败：' + data.message);
                }
            })
            .catch(error => {
                alert('操作失败，请稍后重试');
                console.error('Error:', error);
            });
        }
    </script>
</body>
</html> 